<!-- -->
<template>
	<view class="ruleForm relative pb-60 d-flex" :style="{background: bgColor}">
		<view class="ruleForm_head mb-40 d-flex">
			<text class="ruleForm_head_title" :style="titleStyle">基本信息</text>

			<slot name="head_describe"></slot>
		</view>

		<uv-form labelPosition="left" labelWidth="120rpx" :labelStyle="{fontSize: '24rpx'}" :model="ruleForm" :rules="rules" ref="form">
			<uv-form-item label="姓名" prop="ruleForm.name" borderBottom>
				<uv-input v-model="ruleForm.name" border="none" placeholder="请输入姓名" />
			</uv-form-item>

			<uv-form-item label="身份证号" prop="ruleForm.idcard" borderBottom>
				<uv-input v-model="ruleForm.idcard" border="none" placeholder="请输入身份证号码" />
			</uv-form-item>

			<uv-form-item label="手机号" prop="ruleForm.phone" borderBottom>
				<uv-input v-model="ruleForm.phone" border="none" placeholder="查询的非公开结果以手机号为准" />
			</uv-form-item>

			<uv-form-item label="验证码" class="mb-30" prop="ruleForm.code" borderBottom>
				<uv-input v-model="ruleForm.code" border="none" maxlength="6" placeholder="请输入验证码">
					<template #suffix><text class="code" :style="{color: pageColor}">获取验证码</text></template>
				</uv-input>
			</uv-form-item>

			<uv-form-item class="mb-30">
				<view class="d-flex xyBox">
					<Protocol ref="tocol" class="mb-40" :list="[{title: '授权书', url: ''}]" />
					<view class="checkbox_describe pl-40">
						点击勾选代表您同意上述法律文书的相关条款并签署上述法律文书
					</view>
				</view>
			</uv-form-item>

			<uv-button :disabled="!disabled" @tap="submit" type="primary">{{btnText}}</uv-button>
		</uv-form>
		
		<uv-action-sheet 
				ref="actionSheet"
				:actions="payList" 
				@select="onPaySelect">
				</uv-action-sheet>
	</view>
</template>

<script setup>
	import {
		reactive,
		defineProps,
		computed,
		ref,
		onMounted
	} from 'vue'
	import {
		GetUserRegister
	} from '@/api/user.js'
	import {
		GetWxPayOrder,
		GetZFBPayOrder,
		GetProductList
	} from '@/api/order.js'
	import {
		valiteMobile
	} from '@/utils/format.js'
	import Protocol from '@/components/Protocol/index.vue'

	const form = ref(null)
	const tocol = ref(null);

	const disabled = computed(() => {
		return ruleForm.name && ruleForm.idcard && ruleForm.phone && ruleForm.code
	})

	const props = defineProps({
		btnText: {
			type: String,
			default: ''
		},
		bgColor: {
			type: String,
			default: '#fff'
		},
		titleStyle: {
			type: Object,
			default: () => {}
		},
		pageColor: {
			type: String,
			default: '#6642EA'
		},
		type: {
			type: Number,
			default: 1
		}
	})
	
	// 支付类型
	const actionSheet = ref(null)
	const payList = [
		{
			name: '微信',
			value: 1
		},
		{
			name: '支付宝',
			value: 2
		}
	]

	const ruleForm = reactive({
		name: '1212',
		idcard: '43250319950706701X',
		phone: '15575892574',
		code: '564564'
	})

	const rules = reactive({
		name: [{
			required: true,
			message: '请输入姓名',
			trigger: ['blur', 'change']
		}],
		phone: [{
				required: true,
				message: '请输入手机号',
				trigger: ['blur', 'change']
			},
			{
				validator: (rule, value, callback) => {
					return valiteMobile(value)
				},
				message: '手机格式错误，请重新输入',
				trigger: ['blur', 'change']
			}
		],
		idcard: [{
			required: true,
			message: '请输入证件号',
			trigger: ['blur', 'change']
		}]
	});

	// 查询订单信息
	const product = ref(null)
	const getProduct = async () => {
		try {
			const res = await GetProductList()

			product.value = res.data.find(item => +item.id === +props.type)
		} catch (err) {

		}
	}
	onMounted(() => {
		getProduct()
	})
	
	const onPaySelect = e => {
		uni.getProvider({
			service: 'payment',
			success: res => {
				console.log(res)
				if (!res.provider.includes('wxpay') && e.value === 1) {
					uni.showToast({
						title: '暂不支持微信支付',
						icon: 'error',
						duration: 5000
					})
							
					return
				}
				
				if (!res.provider.includes('alipay') && e.value === 2) {
					uni.showToast({
						title: '暂不支持支付宝支付',
						icon: 'error',
						duration: 5000
					})
							
					return
				}
				
				e.value === 1 && wxPay()
				e.value === 2 && zfbPay()
			},
			fail: err => {
				console.log(err)
			}
		})
	}

	// 提交
	const submit = () => {
		form.value.validate().then(async res => {
				try {
					const res = await GetUserRegister(ruleForm)
					// if (+res.code === -1) {
					// 	uni.showModal({
					// 		title: '提示',
					// 		content: res.msg,
					// 		success: res => {
					// 			console.log(res)
					// 			if (res.confirm) {
					// 				uni.navigateTo({
					// 					url: '/share/Promoter/index'
					// 				})
					// 			}
					// 		}
					// 	})
					// }
					actionSheet.value.open()
				} catch(err) {
					
				}
		})
	}
	
	// 微信支付
	const wxPay = async () => {
		try {
			const order = await GetWxPayOrder({totalFee: 1, productcode: product.value.productcode})
			uni.requestPayment({
				provider:'wxpay',
				orderInfo: order.data,
				success: res => {
					uni.navigateTo({
						
					})
				},
				fail: err => {
					console.log(res)
					uni.showModal({
						content: JSON.stringify(err)
					})
				}
			})
		} catch(err) {}
	}
	
	// 支付宝支付
	const zfbPay = async () => {
		try {
			const order = await GetZFBPayOrder({totalFee: 1, productcode: product.value.productcode})
			uni.requestPayment({
				provider:'alipay',
				orderInfo: order.data,
				success: res => {
					uni.navigateTo({
						
					})
				},
				fail: err => {
					console.log(res)
					uni.showModal({
						content: JSON.stringify(err)
					})
				}
			})
		} catch(err) {
			
		}
	}
</script>

<style scoped lang="scss">
	.ruleForm {
		flex-direction: column;
		z-index: 3;

		.xyBox {
			flex-direction: column;
		}

		&_head {
			flex-direction: row;
			align-items: center;
			justify-content: space-between;

			&_title {
				font: {
					size: 26rpx;
					weight: bold;
				}
			}
		}

		.code {
			font: {
				size: 26rpx;
			}
		}

		.checkbox {
			flex-direction: column;

			&_describe {
				line-height: 45rpx;
				color: #6C7282;

				font: {
					size: 24rpx;
				}
			}
		}
	}

	::v-deep {
		.uv-button {
			margin: auto;
			width: 520rpx !important;
			border-radius: 60rpx;
		}

		.uv-button--disabled {
			background-color: rgba(194, 201, 205, 1) !important;
			border-color: rgba(194, 201, 205, 1) !important;
		}
	}
</style>